<route lang="json5" home>
{
style: {
navigationBarTitleText: '首页',
},
}
</route>

<template>
  <gi-page-wrapper>
    <view class="page">
      <!-- 轮播图 -->
      <swiper v-if="!loading && !error && swiperList.length > 0" class="swiper" :autoplay="true" :interval="3000">
        <swiper-item v-for="item in swiperList" :key="item.name">
          <view class="swiper-item" @click="handleSwiperClick(item.url)">
            <image
              :src="item.img"
              mode="aspectFill"
              class="swiper-image"
            />
            <view class="swiper-info">
              <text class="swiper-title">{{ item.name }}</text>
              <text v-if="item.description" class="swiper-desc">{{ item.description }}</text>
            </view>
          </view>
        </swiper-item>
      </swiper>

      <view v-if="error" class="error-tip">{{ error }}</view>

      <!-- 图标网格 -->
      <sar-grid>
        <sar-grid-item v-for="item in menuList" :key="item.name" :text="item.name" :icon="item.icon" icon-size="38px" />
      </sar-grid>

      <!-- 最新资讯 -->
      <gi-card title="最新内容" class="mt-3">
        <view
          v-for="news in newsList"
          :key="news.id"
          class="news__item"
          @click="handleNewsClick(news.url)"
        >
          <view class="news__content">
            <text class="news__item-title">{{ news.title }}</text>
            <view class="news__meta">
              <text class="news__date">{{ news.date }}</text>
              <view class="news__stats">
                <text class="news__views">{{ news.views }} 阅读</text>
                <text class="news__likes">{{ news.likes }} 赞</text>
              </view>
            </view>
          </view>
          <image
            :src="news.image"
            class="news__image"
            mode="aspectFill"
          />
        </view>
      </gi-card>
    </view>
  </gi-page-wrapper>
</template>

<script lang="ts" setup>
import type { SwiperItemType } from '@/pages/home/data'
import { menuList, newsList } from '@/pages/home/data'
import { http } from '@/utils/http'
import { isHttp } from '@/utils/validate'
import { onLoad } from '@dcloudio/uni-app'

const swiperList = ref<SwiperItemType[]>([])
const loading = ref(false)
const error = ref('')

onLoad(async () => {
  // 隐藏原生tabBar
  await uni.hideTabBar()
  loading.value = true
  error.value = ''

  try {
    const response = await http.get<{
      special: SwiperItemType[]
      platinum: SwiperItemType[]
      gold: SwiperItemType[]
      silver: SwiperItemType[]
      bronze: SwiperItemType[]
    }>('/sponsor.json', undefined, { proxyPrefix: '/continew', returnData: false, checkCode: false })

    const result = response as unknown as {
      special: SwiperItemType[]
      platinum: SwiperItemType[]
      gold: SwiperItemType[]
      silver: SwiperItemType[]
      bronze: SwiperItemType[]
    }

    if (!result) {
      error.value = '获取数据失败'
      return
    }

    // 只获取 special 和 platinum 赞助者
    const sponsors = [
      ...(result.special || []),
      ...(result.platinum || []),
    ]

    if (sponsors.length === 0) {
      error.value = '暂无数据'
      return
    }

    sponsors.forEach((item) => {
      if (!item.name)
        return

      swiperList.value.push({
        name: item.name,
        img: isHttp(item.img) ? item.img : `https://continew.top/images/sponsor/ads/${item.img}`,
        url: item.url,
        description: item.description,
      })
    })
  }
  catch (err) {
    console.error('请求失败:', err)
    error.value = '网络请求失败，请稍后重试'
  }
  finally {
    loading.value = false
  }
})

// 处理轮播图点击
function handleSwiperClick(url: string) {
  uni.navigateTo({
    url: `/pages/common/web-view?url=${url}`,
  })
}

// 处理新闻点击
function handleNewsClick(url: string) {
// #ifdef APP-PLUS
  plus.runtime.openURL(url) // 这里默认使用外部浏览器打开而不是内部web-view组件打开
  // #endif
  // #ifdef H5
  window.open(url)
// #endif
}
</script>

<style lang="scss" scoped>
.page {
  padding: $padding;
}

.swiper {
  height: 180px;
  margin-bottom: 20px;

  &-item {
    position: relative;
    width: 100%;
    height: 100%;
  }

  &-image {
    width: 100%;
    height: 100%;
  }
}

.error-tip {
  padding: 16px;
  text-align: center;
}

.news {

  &__list {
    display: flex;
    flex-direction: column;
  }

  &__item {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #eee;

    &:last-child {
      border-bottom: none;
    }
  }

  &__content {
    flex: 1;
    margin-right: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
  }

  &__item-title {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 12px;
    // 最多显示两行
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  &__image {
    width: 90px;
    height: 90px;
    border-radius: 4px;
  }

  &__meta {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #888;
  }

  &__date {
    margin-right: 16px;
  }

  &__stats {
    display: flex;
    gap: 12px;
  }
}
</style>
